<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>修改图片尺寸</title>
    <link rel="icon" href="">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
  </head>
  <body>
  	<form class="form-inline">
  		<div class="form-group">
		    <label>图片文件</label>
		    <div class="input-group file-input" data-accept="image/*" data-multiple="multiple">
		    	<input id="imageFiles" type="text" class="form-control" /><label class="input-group-addon btn btn-primary">浏览...</label>
		    </div>
		</div>
		<div class="form-group">
			<label>目标尺寸</label>
			<input id="targetSize" type="text" class="form-control" value="32x32" />
		</div>
		<div class="form-group">
		    <label>输出文件夹</label>
		    <div class="input-group file-input" data-dir="dir">
			   <input id="targetDir" type="text" class="form-control" /><label class="input-group-addon btn btn-primary">浏览...</label>
		    </div>
		</div>
		<div class="form-group">
		    <label></label>
		    <button id="resizeBtn" type="button" class="btn btn-primary">执行</button>
		</div>
  	</form>

    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/template-web.js"></script>
    <script type="text/javascript" src="../../js/fileinput.js"></script>
    <script type="text/javascript">
	
	$("#resizeBtn").click(function(){
		var files=$("#imageFiles").val();
		var targetSize=$("#targetSize").val();
		var targetDir=$("#targetDir").val();
		var cmd=`gnome-terminal -e 'mogrify -resize ${targetSize} -path "${targetDir}" `+files.replace(/;/g,' ')+` && nautilus "${targetDir}"'`;
		window.top.app.run(cmd);
		
		//关闭程序对话框
		window.top.app.appDialog.modal('hide');

	});	
    </script>
  </body>
</html>
